@use '@lingshu/theme-lib/scss/util.scss' as *;
.org-page-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: useThemeVar('module_bg1');

  .org-mapping-container {
    display: flex;
    height: 100%;
    flex-direction: row;
    background-color: useThemeVar('module_bg1');

    .org-tree-container {
      width: 312px;
      min-width: 312px;
      float: left;
      margin-right: 24px;
      height: 100%;
      border-radius: 12px;
      padding: 16px;
      background-color: useThemeVar('module_bg5');
      display: flex;
      flex-direction: column;
      overflow-y: hidden;

      .search-input {
        margin-bottom: 16px;
        height: 32px;
      }

      :global(.el-tree-node__label) {
        font-size: $font-size-middle;
        color: useThemeVar('gray1');
      }

      .org-filter-flat-results {
        margin-top: 8px;
        max-height: calc(100% - 60px);
        overflow-y: auto;
        padding: 0;

        .result-item-active {
          background-color: useThemeVar('component_hover_bg');
        }

        .result-item {
          display: flex;
          align-items: center;
          padding: 8px 12px;
          cursor: pointer;
          font-size: $font-size-middle;
          height: 40px;
          color: useThemeVar('gray1');
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &:hover {
            background-color: useThemeVar('component_hover_bg');
          }

          .result-label {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          mark {
            color: useThemeVar('color_primary') !important;
            font-weight: bold;
          }

          // 文本高亮
          :global(.hy-highlight-keyword) {
            color: useThemeVar('color_primary');
            background: transparent;
          }
        }

        .no-results {
          text-align: center;
          color: useThemeVar('gray3');
          padding: 20px;
        }

        .loading-results {
          text-align: center;
          color: useThemeVar('gray3');
          padding: 20px;
        }
      }

      .org-tree {
        flex: 1;
        overflow-y: auto;
      }
    }
    .org-main-content {
      flex: 1;
      overflow-y: auto;
      background-color: useThemeVar('module_bg5');
      border-radius: 12px;
      // min-width: 800px;

      .org-status-section {
        display: flex;
        justify-content: space-between;
        margin: 16px 16px 24px;
        font-weight: $font-weight-base;
        font-size: $font-size-large;
        color: useThemeVar('color_primary');
      }

      .org-info-section {
        margin-bottom: 16px;
        margin-top: 8px;
        padding: 0 16px;
        background-color: useThemeVar('module_bg5');
        border-radius: 4px;

        :global(.el-form-item) {
          margin-bottom: 0px;
        }
      }

      .info-title {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        font-size: $font-size-middle;
        font-weight: $font-weight-base;
        color: useThemeVar('gray1');

        .info-line {
          display: inline-block;
          width: 4px;
          height: 16px;
          border-radius: 3px;
          opacity: 1;
          background: useThemeVar('color_primary');
          margin-right: 12px;
        }
      }
      .org-mapping-section {
        padding: 16px;
        background-color: useThemeVar('module_bg5');
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        height: calc(100% - 184px);
        display: flex;
        flex-direction: column;

        .mapping-operation {
          display: flex;
          justify-content: flex-end;
          flex: 1;
          align-items: center;

          .mapping-search-input {
            width: 240px;
            height: 32px;
          }

          @media (max-width: 1600px) {
            .mapping-search-input {
              width: 200px;
            }
          }

          @media (max-width: 1366px) {
            .mapping-search-input {
              width: 170px;
            }
          }

          .custom-vertical-divider {
            height: 24px;
          }

          .mapping-operation-group-menu {
            display: none;

            .mapping-horizontal-menu {
              height: 32px;
              line-height: 32px;
              width: 84px;
              border: 1px solid useThemeVar('color_primary');
              margin-left: 12px;
              border-radius: 4px;

              :global(.el-sub-menu .el-sub-menu__title) {
                color: useThemeVar('color_primary');
                font-size: $font-size-middle;
                border: none;
              }
              :globla(.el-dropdown-menu__item) {
                color: var(--ls-gray1);
              }
              :global(.el-sub-menu) {
                width: 84px;
              }
              :global(.el-icon) {
                display: none;
              }
            }
          }

          @media (max-width: 1600px) {
            .mapping-operation-group {
              display: none;
            }
            .mapping-operation-group-menu {
              display: flex;
            }
          }
        }

        .button-border {
          border-color: useThemeVar('color_primary');
        }

        .button-font {
          font-size: $font-size-middle;
          color: useThemeVar('color_primary');
        }

        :global(.el-table .cell) {
          padding: 0 10px;
          height: 24px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        :global(.table-header .cell) {
          font-weight: $font-weight-base;
          color: useThemeVar('module_-bg10');
          font-size: $font-size-middle;
        }

        :global(.operation-table-column .cell) {
          padding: 0 16px;
          text-align: left;
        }

        :global(.el-table__border-left-patch) {
          width: 0px;
        }

        // :global(.el-table--fit .el-table__inner-wrapper:before) {
        //   height: 0px;
        // }

        .operation-column {
          padding: 0 16px !important;
        }

        .pagination-container {
          display: flex;
          justify-content: flex-end;
          margin-top: 16px;
        }
      }
    }
  }
}

.primary-border {
  border-color: var(--ls-color_primary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.success {
  background-color: useThemeVar('success');
}

.danger {
  background-color: useThemeVar('error');
}

.delete-container {
  display: block;
  text-align: center;
  font-size: $font-size-middle;
}

.slot-placeholder-right-bottom {
  position: absolute;
  right: 8px; /* 距离右侧的间距，可按需调整 */
  bottom: 2px; /* 距离底部的间距，可按需调整 */
  /* 可选：避免内容换行导致位置偏移 */
  white-space: nowrap;
}

.primary-button {
  background-color: useThemeVar('color_primary');
  color: useThemeVar('white1');

  &:hover {
    background-color: useThemeVar('primary_hover');
    color: useThemeVar('white1');
  }
}

.gray-button {
  background-color: useThemeVar('button_gray_bg1');
  color: useThemeVar('gray1');
  border: useThemeVar('border_bg2');

  &:hover {
    background-color: useThemeVar('button_gray_bg2');
    color: useThemeVar('gray1');
  }
}

.icon-small {
  font-size: $font-size-middle;
  margin-left: 8px;
  color: useThemeVar('color_primary');
}

.icon-Search {
  color: useThemeVar('gray3');
  font-size: $font-size-middle;
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

:global(.el-dialog__title) {
  font-size: $font-size-large;
  font-weight: 400;
  color: useThemeVar('gray1');
}

:global(.mapping-horizontal-menu-popper) {
  :global(.el-menu--popup) {
    min-width: 120px !important;
  }
  // :global(.el-icon) {
  //   display: none;
  // }

  :global {
    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
      background-color: useThemeVar('component_hover_bg');
    }
  }
}
